<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <!--<link rel="stylesheet" href="css/datatables/css/jquery.dataTables.css"/>--> 
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/highcharts.js"></script>
    <script type="text/javascript" src="API/js/modules/exporting.js"></script>
    <!--<script type="text/javascript" src="API/js/jquery.dataTables.min.js"></script>--> 
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/fonctions.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script type="text/javascript">
    checkMaintenance();
    checkAuthentification();
    
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 4;

    var tab_percent_activite = new Array();
    var tab_percent_page_activite = new Array();
	
    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //A la construction de la page
    $(document).on('pageinit',function() {
        try {
            // Init commun
            init_commun();
        }
        catch (er) {
            log(0, "ERROR(init_stats):" + er.message);
        }
    });
    
    //Affichage de la page avant onload
    $(document).on('pageshow',function() {
        try {
            show_commun();
        }
        catch (er) {
            log(0, "ERROR(show):" + er.message);
        }
    });
    
    //Fin chargement page
    function OnLoad() {
        try {
            // Init page
            afficherActivite();
            afficherPageActivite();
        }
        catch (er) {
            log(0, "ERROR(OnLoad):" + er.message);
        }
    }
		
		
    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * afficherActivite
     */
    function afficherActivite() {
        try {
            var tab = new Array();
            tab = getUserActivite();
            var total  = 0;

            for (var indice in tab) {
                tab[indice][1] = parseInt(tab[indice][1]);
                total += tab[indice][1];
            }

            for (var indice in tab) {
                tab_percent_activite[tab[indice][0]] = Math.round(tab[indice][1] / total * 100 * 100) / 100;
            }

            afficheActivite(tab);
        }
        catch (er) {
            log(0, "ERROR(afficherActivite):" + er.message);
        }
    }

    /**
     * afficherPageActivite
     */
    function afficherPageActivite() {
        try {
            var tab = new Array();
            tab = getPageActivite();
            var total  = 0;

            for (var indice in tab) {
                tab[indice][1] = parseInt(tab[indice][1]);
                total += tab[indice][1];
            }

            for (var indice in tab) {
                tab_percent_page_activite[tab[indice][0]] = Math.round(tab[indice][1] / total * 100 * 100) / 100;
            }

            affichePageActivite(tab);
        }
        catch (er) {
            log(0, "ERROR(afficherPageActivite):" + er.message);
        }
    }	
		
    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    /**
     * affichePageActivite
     * 
     * @param {Array} tabData
     */
    function affichePageActivite(tabData) {
        var chart;

        $(document).ready(function() {
            chart = new Highcharts.Chart({
                exporting: {
                    url: 'http://export.highcharts.com',
                    filename: 'pageActivite',
                    width: 1600
                },
                chart: {
                    renderTo: 'divPageActivitePie',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'R\351partition de l\'activit\351 par page'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_page_activite[this.point.name] + '%';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_page_activite[this.point.name] + '%';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: tabData
                    }]
                });
            }
        );
    }

    /**
     * afficheActivite
     *
     * @param {Array} tabData 
     */
    function afficheActivite(tabData) {
        var chart;

        $(document).ready(function() {
            chart = new Highcharts.Chart({
                exporting: {
                    url: 'http://export.highcharts.com',
                    filename: 'utilisateurActivite',
                    width: 1600
                },
                chart: {
                    renderTo: 'divActivitePie',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'R\351partition de l\'activit\351 par utilisateur'
                },
                tooltip: {
                    formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_activite[this.point.name] + '%';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_activite[this.point.name] + '%';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: tabData
                    }]
                });
            }
        );
    }
			
    </script>
	
</head>
<body onload="OnLoad();">
    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content" id="main_content">

            <div data-role="collapsible"data-collapsed="false" data-mini="true">
                <h2>R&eacute;partition de l'activit&eacute; par utilisateur</h2>
                <div id="divActivitePie">Pas de r&eacute;sultat.</div>
            </div>		

            <div data-role="collapsible"data-collapsed="false" data-mini="true">
                <h2>R&eacute;partition de l'activit&eacute; par page</h2>
                <div id="divPageActivitePie">Pas de r&eacute;sultat.</div>
            </div>      
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>